﻿﻿<form id="frmBXJGShopProductCategory" class="frm-container">
    <input type="hidden" name="id" value="0" />
    <table class="frm-box">
        <tr>
            <th>上级</th>
            <td><input name="parentId" value="0" /></td>
        </tr>
        <tr>
            <th>名称</th>
            <td><input name="displayName" class="easyui-textbox" tabindex="0" data-options="required:true,validType:'length[0,50]'" /></td>
        </tr>
        <tr>
            <th>显示在首页</th>
            <td><input class="easyui-switchbutton" type="checkbox" name="showInHome" value="true" data-value-type="boolean" /></td>
        </tr>
        <tr>
            <th class="top">动态属性(sku)</th>
            <td><table id="dynamicProperty" style="width:500px;"></table></td>
        </tr>
        <tr>
            <th class="top">图标</th>
            <td id="frmBXJGShopProductCategoryIcon" class="imgUploader-container" style=" padding:7px 0;">
                <div id="frmBXJGShopProductCategoryIconPicker" class="imgUploader-picker">选择图片</div>
                <div class="imgUploader-images" style="max-width: 830px;"></div>
                <!--<input type="hidden" name="icon" />-->
            </td>
        </tr>
        <tr>
            <th class="top">图片1</th>
            <td id="frmBXJGShopProductCategoryImage1" class="imgUploader-container" style=" padding:7px 0;">
                <div id="frmBXJGShopProductCategoryImage1Picker" class="imgUploader-picker">选择图片</div>
                <div class="imgUploader-images" style="max-width:830px;"></div>
                <!--<input type="hidden" name="image1" />-->
            </td>
        </tr>
        <tr>
            <th class="top">图片2</th>
            <td id="frmBXJGShopProductCategoryImage2" class="imgUploader-container" style=" padding:7px 0;">
                <div id="frmBXJGShopProductCategoryImage2Picker" class="imgUploader-picker">选择图片</div>
                <div class="imgUploader-images" style="max-width:830px;"> </div>
                <!--<input type="hidden" name="image2" />-->
            </td>
        </tr>
    </table>
</form>
<script>
    (function () {
        var m = 'BXJGShopProductCategory';
        var $dlg = $('#dlg' + m);
        var $frm = $('form');
        var $cbParent = $frm.find("[name='parentId']");
        var id = $dlg.data('id');
        var parent = $dlg.data('parent');
        const $dynamicProperty = $frm.find('#dynamicProperty');


        const $uploader = $('#frmBXJGShopProductCategoryIcon');
        const $uploaderImages = $uploader.find('.imgUploader-images');

        const $uploaderImage1 = $('#frmBXJGShopProductCategoryImage1');
        const $uploaderImage1Images = $uploaderImage1.find('.imgUploader-images');

        const $uploaderImage2 = $('#frmBXJGShopProductCategoryImage2');
        const $uploaderImage2Images = $uploaderImage2.find('.imgUploader-images');

        var initParentTask = $.Deferred();
        var initFormTask = $.Deferred();

        //初始化父节点下拉框
        $cbParent.combotree({
            url: abp.appPath + 'api/services/bxjgshop/productCategory/GetTreeForSelect',
            queryParams: { forType: 4, parentText: '全部' },
            prompt: abp.localization.bxjgUtils('全部'),
            onLoadSuccess: function (node, data) {
                initParentTask.resolve();
            },
            loadFilter: function (data, parent) {
                data = $.fn.combotree.defaults.loadFilter(data, parent);
                if (data && data[0])
                    data[0].id = 0;//奇怪这里用'0' 与输入口默认值对应不起来
                return data;
            }
        });
        //动态属性控件初始化
        $dynamicProperty.datagrid({
            columns: [[
                { field: 'propertyName', title: '属性名', width: 100, editor: 'textbox' },
                { field: 'displayName', title: '属性标题', width: 100, editor: 'textbox' },
                {
                    field: 'inputType', title: '输入类型', width: 100, editor: {
                        type: 'combobox', options: {
                            editable: false,
                            data: [
                                { displayText: '选择', value: 'COMBOBOX', selected: true },
                                { displayText: '勾选', value: 'CHECKBOX' },
                                { displayText: '文本输入', value: 'SINGLE_LINE_STRING' }
                            ]
                        }
                    }
                },
                {
                    field: 'propertyValues', title: '可选值', width: 190, editor: {
                        type: 'textbox', options: {
                            width: '100%',
                            prompt: '如：A,B,C...'
                        }
                    }
                }
            ]],
            data: [
                { propertyName: '', displayName: '', inputType: '', propertyValues: '' },
                { propertyName: '', displayName: '', inputType: '', propertyValues: '' },
                { propertyName: '', displayName: '', inputType: '', propertyValues: '' },
                { propertyName: '', displayName: '', inputType: '', propertyValues: '' },
                { propertyName: '', displayName: '', inputType: '', propertyValues: '' }
            ]
        });
        for (let i = 0; i < 5; i++) {
            $dynamicProperty.datagrid('beginEdit', i);
        }

        $dlg.data('clickSave', function () {
            if (!$frm.form('validate'))
                return;
            let postData = $frm.serializeJSON(/*{ checkboxUncheckedValue: "false" }*/);

            //处理动态属性
            for (let i = 0; i < 5; i++) {
                $dynamicProperty.datagrid('endEdit', i);
                $dynamicProperty.datagrid('beginEdit', i);
            }
            postData.dynamicProperty = $dynamicProperty.datagrid('getRows');

            //处理商品图片
            let files = uploader.getFiles('complete');
            if (files && files.length > 0)
                postData.icon = files[0].serverPath;
            files = uploaderImage1.getFiles('complete');
            if (files && files.length > 0)
                postData.image1 = files[0].serverPath;
            files = uploaderImage2.getFiles('complete');
            if (files && files.length > 0)
                postData.image2 = files[0].serverPath;

            let defer;
            if (id) {
                defer = abp.services.bxjgshop.productCategory.update(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('修改') + abp.localization.bxjgUtils('成功') + '!');
                });
            } else {
                postData.id = 0;
                defer = abp.services.bxjgshop.productCategory.create(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('新增') + abp.localization.bxjgUtils('成功') + '!');
                });
            }
            defer.done(function () {
                onSaved();
            });
            abp.ui.setBusy($dlg, defer);
        });

        function onSaved() {
            var f = $dlg.data('onSaved');
            if (f)
                f();
        }

        //icon图片上传开始-------------------------------------
        let uploader = WebUploader.create({
            auto: true,// 选完文件后，是否自动上传。
            swf: '/lib/webuploader-0.1.5/Uploader.swf', // swf文件路径
            server: abp.appPath + 'api/file/upload',// 文件接收服务端。
            pick: '#frmBXJGShopProductCategoryIconPicker',// 选择文件的按钮。可选。内部根据当前运行时创建，可能是input元素，也可能是flash.
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('uploadSuccess', function (file, response) {
            file.serverPath = response.result[0].filePath;
            //file.thumPath = response.result[0].thumPath;
        });
        uploader.on('fileQueued', function (file) {
            file.on('statuschange', function (n, o) {
                $i.removeClass('imgUploader-img-' + o);
                $i.addClass('imgUploader-img-' + n);
                let statusText = '';
                switch (n) {
                    case 'complete':
                        statusText = '已完成';
                        break;
                    case 'error':
                        statusText = '失败';
                        break;
                    case 'progress':
                        statusText = '上传中...';
                        break;
                    default:
                        statusText = file.statusText;
                }
                $i.text(statusText);
            });


            let $box = $('<div class="imgUploader-img-container">').appendTo($uploaderImages);
            let $a = $('<a>×</a>').appendTo($box);
            let $img = $('<img />').appendTo($box);
            let $i = $('<i />').appendTo($box);


            $a.on('click', function () {
                uploader.removeFile(file, true);
                $box.remove();
            });
            if (file.serverPath) {
                $img.attr('src', abp.appPath + file.serverPath);
                file.setStatus('complete');
            }
            else {
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                });
            }
        });
        uploader.on('uploadBeforeSend', function (obj, data, headers) {
            headers.Authorization = "Bearer " + abp.getCurrentJWTToken();
            headers.createThum = false;
        });
        //icon图片上传结束-------------------------------------

        //image1图片上传开始-------------------------------------
        let uploaderImage1 = WebUploader.create({
            auto: true,// 选完文件后，是否自动上传。
            swf: '/lib/webuploader-0.1.5/Uploader.swf', // swf文件路径
            server: abp.appPath + 'api/file/upload',// 文件接收服务端。
            pick: '#frmBXJGShopProductCategoryImage1Picker',// 选择文件的按钮。可选。内部根据当前运行时创建，可能是input元素，也可能是flash.
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploaderImage1.on('uploadSuccess', function (file, response) {
            file.serverPath = response.result[0].filePath;
            //file.thumPath = response.result[0].thumPath;
        });
        uploaderImage1.on('fileQueued', function (file) {
            file.on('statuschange', function (n, o) {
                $i.removeClass('imgUploader-img-' + o);
                $i.addClass('imgUploader-img-' + n);
                let statusText = '';
                switch (n) {
                    case 'complete':
                        statusText = '已完成';
                        break;
                    case 'error':
                        statusText = '失败';
                        break;
                    case 'progress':
                        statusText = '上传中...';
                        break;
                    default:
                        statusText = file.statusText;
                }
                $i.text(statusText);
            });


            let $box = $('<div class="imgUploader-img-container">').appendTo($uploaderImage1Images);
            let $a = $('<a>×</a>').appendTo($box);
            let $img = $('<img />').appendTo($box);
            let $i = $('<i />').appendTo($box);


            $a.on('click', function () {
                uploaderImage1.removeFile(file, true);
                $box.remove();
            });
            if (file.serverPath) {
                $img.attr('src', abp.appPath + file.serverPath);
                file.setStatus('complete');
            }
            else {
                uploaderImage1.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                });
            }
        });
        uploaderImage1.on('uploadBeforeSend', function (obj, data, headers) {
            headers.Authorization = "Bearer " + abp.getCurrentJWTToken();
            headers.createThum = false;
        });
        //image1图片上传结束-------------------------------------

        //image2图片上传开始-------------------------------------
        let uploaderImage2 = WebUploader.create({
            auto: true,// 选完文件后，是否自动上传。
            swf: '/lib/webuploader-0.1.5/Uploader.swf', // swf文件路径
            server: abp.appPath + 'api/file/upload',// 文件接收服务端。
            pick: '#frmBXJGShopProductCategoryImage2Picker',// 选择文件的按钮。可选。内部根据当前运行时创建，可能是input元素，也可能是flash.
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploaderImage2.on('uploadSuccess', function (file, response) {
            file.serverPath = response.result[0].filePath;
            //file.thumPath = response.result[0].thumPath;
        });
        uploaderImage2.on('fileQueued', function (file) {
            file.on('statuschange', function (n, o) {
                $i.removeClass('imgUploader-img-' + o);
                $i.addClass('imgUploader-img-' + n);
                let statusText = '';
                switch (n) {
                    case 'complete':
                        statusText = '已完成';
                        break;
                    case 'error':
                        statusText = '失败';
                        break;
                    case 'progress':
                        statusText = '上传中...';
                        break;
                    default:
                        statusText = file.statusText;
                }
                $i.text(statusText);
            });


            let $box = $('<div class="imgUploader-img-container">').appendTo($uploaderImage2Images);
            let $a = $('<a>×</a>').appendTo($box);
            let $img = $('<img />').appendTo($box);
            let $i = $('<i />').appendTo($box);


            $a.on('click', function () {
                uploaderImage2.removeFile(file, true);
                $box.remove();
            });
            if (file.serverPath) {
                $img.attr('src', abp.appPath + file.serverPath);
                file.setStatus('complete');
            }
            else {
                uploaderImage2.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                });
            }
        });
        uploaderImage2.on('uploadBeforeSend', function (obj, data, headers) {
            headers.Authorization = "Bearer " + abp.getCurrentJWTToken();
            headers.createThum = false;
        });
        //image2图片上传结束-------------------------------------

        //没必要等下拉加载完再赋值，因为easyui会在加载完后自动处理已存在的值，其它控件也一样
        if (id) {
            initFormTask = abp.services.bxjgshop.productCategory.get({ id: id }).done(function (d) {
                $frm.form('load', d);
                //动态属性初始化
                if (d.dynamicProperty) {
                    let c = 5 - d.dynamicProperty.length;
                    for (let i = 0; i < c; i++) {
                        d.dynamicProperty.push({ propertyName: '', displayName: '', inputType: '', propertyValues: '' });
                    }
                    $dynamicProperty.datagrid('loadData', d.dynamicProperty);
                    for (let i = 0; i < 5; i++) {
                        $dynamicProperty.datagrid('beginEdit', i);
                    }
                }
                //图像初始化
                if (d.icon) {
                    let obj = {
                        id: d.icon,//这个好像也没什么卵用
                        name: d.icon,
                        //ext: item.extension.substring(1),//这行貌似没什么卵用，webuploader取文件名后缀
                        size: 1
                    };
                    let file = new WebUploader.File(obj);
                    file.serverPath = d.icon;
                    uploader.addFiles(file);
                    file.setStatus('complete');
                }
                if (d.image1) {
                    let obj = {
                        id: d.image1,//这个好像也没什么卵用
                        name: d.image1,
                        //ext: item.extension.substring(1),//这行貌似没什么卵用，webuploader取文件名后缀
                        size: 1
                    };
                    let file = new WebUploader.File(obj);
                    file.serverPath = d.image1;
                    uploaderImage1.addFiles(file);
                    file.setStatus('complete');
                }
                if (d.image2) {
                    let obj = {
                        id: d.image2,//这个好像也没什么卵用
                        name: d.image2,
                        //ext: item.extension.substring(1),//这行貌似没什么卵用，webuploader取文件名后缀
                        size: 1
                    };
                    let file = new WebUploader.File(obj);
                    file.serverPath = d.image2;
                    uploaderImage2.addFiles(file);
                    file.setStatus('complete');
                }
            });
        } else {
            //loadEmptyDynamicProperty();
            //for (let i = 0; i < 5; i++) {
            //    $dynamicProperty.datagrid('beginEdit', i);
            //}

            $cbParent.combotree('setValue', parent);
            initFormTask.resolve();
        }

        abp.ui.setBusy($dlg, $.when(initFormTask, initParentTask));

    })();
</script>
